<template>
  <div>
    <el-form-item
      label="姓名"
      prop="name"
    >
      <el-input
        v-model="name"
        placeholder="请输入村民姓名"
        clearable
      />
    </el-form-item>
    <el-form-item
      label="性别"
      prop="sex"
    >
      <el-select
        v-model.number="sex"
        placeholder="请选择性别"
        clearable
      >
        <el-option
          label="男"
          :value="0"
        />
        <el-option
          label="女"
          :value="1"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="民族"
      prop="nation"
    >
      <el-select
        v-model.number="nation"
        placeholder="请选择所属民族"
        clearable
      >
        <el-option
          v-for="(item, index) in nationAtt"
          :key="index"
          :label="item"
          :value="index"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="手机号"
      prop="phone"
    >
      <el-input
        v-model.number="phone"
        placeholder="请输入村民手机号 -> 以下手机号,身份证号,地址至少选一填写"
        clearable
      />
    </el-form-item>
    <el-form-item
      label="身份证号"
      prop="identityNumber"
    >
      <el-input
        v-model="identityNumber"
        placeholder="请输入村民身份证号"
        clearable
      />
    </el-form-item>
    <el-form-item
      label="家庭地址"
      prop="address"
    >
      <el-input
        v-model="address"
        placeholder="请输入村民家庭地址"
        clearable
      />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "VillageInfo",
  props: {
    villagerInfo: {
      required: true,
      type: Object
    },
  },
  data() {
    return {
      // village_info: {
        //姓名
        name: "",
        //性别
        sex: "",
        //民族
        nation: "",
        //手机号
        phone: "",
        //身份证号
        identityNumber: "",
        //籍贯
        address: "",
      // },
      rules: {
        name: [
          { required: true, message: "请输入村民姓名", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "请选择性别", trigger: "change" }
        ],
        nation: [
          { required: true, message: "请选择所属民族", trigger: "change" }
        ],
        phone: [
          { required: false, message: "请输入村民手机号", trigger: "blur" }
        ],
        identityNumber: [
          { required: false, message: "请输入村民身份证号", trigger: "blur" }
        ],
        address: [
          { required: false, message: "请输入村民家庭地址", trigger: "blur" }
        ],
      }
      
    };
  },
  watch: {
    villagerInfo (newVal, oldVal) {
      // console.log(newVal, oldVal)
      this.init()
    },
    name(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }, 
    sex(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }, 
    nation(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }, 
    phone(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }, 
    identityNumber(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }, 
    address(newVal, oldVal) {
      this.$emit('getVillagerInfo', getVillageInfo())
    }
  },
  async created() {
    this.init();
  },
  methods: {
    init() {
      // this.village_info = Object.assign({}, this.villagerInfo)
      let  { name, sex, nation, phone, identityNumber, address } = this.villagerInfo
        this.name = name
        this.sex = sex
        this.nation = nation
        this.phone = phone
        this.identityNumber = identityNumber
        this.address = address
    },
    getVillageInfo () {
      return {
        name: this.name,
        sex: this.sex,
        nation: this.nation,
        phone: this.phone,
        identityNumber: this.identityNumber,
        address: this.address,
      }
    },
  },
};
</script>
